/* the appropriate background class will be applied based on class attached to the body */
body {
	margin: 0;
	padding: 0;
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size: 100%;
}

#threeColLayout {
	background-attachment: fixed;
	background-image: url(../image/background.gif);
	background-repeat: repeat-x;
	background-color: #9EE178;
}

#twoColLayout {
	background-attachment: fixed;
	background-color: #9EE178;
	background-image: url(../image/background.gif);
	background-repeat: repeat-x;
	width: auto;
}

#oneColLayout {
	background: #CAC78A url(../image/background.gif) repeat-x fixed;
}

/* default links */
a:link {
	background-color: transparent;
	text-decoration: underline;
	color: #666;
}

a:hover {
	background-color: #FFC;
	text-decoration: underline;
	color: #990;
}

a:visited {
	background-color: transparent;
	text-decoration: underline;
	color: #666
}

/* headers here */
h1 {
	margin: 0;
	padding: 30px;
	font-size: 150%;
	color: #FF0000;
	text-indent: -9000px;
}

h2 {
	margin: 0 10px 0 10px;
	padding: 2px;
	font-size: 130%;
	color: #333;
	background: #9EE178;
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */
h3 {
	text-transform: uppercase;
	display: inline;
	font-size: 92%;
	margin: 10px 5px 0 5px;
	padding: 2px;
}

.default h3 {
	background: #F6CE45;
}

.careers h3 {
	background: #F762E0;
}

.one_man h3 {
	font-size: 110%;
	background: #B18FD1;
}

.interviews h3 {
	font-size: 110%;
	background: #D7D493;
}

.profiles h3 {
	background: #C4DDB8;
}

/* main wrapper that holds it all centrally */
#wrapper {
	width: 1024px;
	margin: 0 auto;
	padding: 0 10px 10px 10px;
	background-color: #B7EC99;
}

/* default masthead holding the banner and mainNav */
#header {
	width: 1024px;
	height: 170px;
	background: url(../image/header.gif);
}

/* now the three main columns, named in order of importance and display when styles switched off */
#primaryContent {
	float: left;
	width: 824px;
	display: inline;
	margin-top: 0;
	margin-right: 10;
	margin-left: 10;
}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */
#threeColLayout #primaryContent {
	float: left;
	margin-top: 10;
	margin-right: 10;
	width: 844px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */
#twoColLayout #primaryContent {
	float: left;
	margin-right: 10px;
	width: 824px;
	margin-left: 10px;
	height: 100%;
	margin-bottom: 10px;
}

/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */
#twoColLayout #secondaryContent {
	display: none;
	background-color: #000;
}

#secondaryContent {
	float: left;
	width: 270px;
	margin: 0 0 20px 15px;
}

#sideContent {
	float: left;
	width: 180px;
	height: auto;
}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */
#oneColLayout #secondaryContent,#oneColLayout #sideContent {
	display: none;
}

/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */
#twoColContent {
	width: 555px;
	float: left;
	margin: 0 0 20px 195px;
}

/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */
.cbSide {
	width: 160px;
	margin: 5px 0 0 10px;
	padding: 10px 0 5px 0;
	background: #FFF;
}

.cbSide p {
	margin: 0;
	padding: 0 5px 2px 5px;
	font-size: 90%;
	color: #666;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */
.box {
	background: url(../image/diags.gif);
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
	height: 100%;
	width: 100%;
}

/* Styling of the boxes if there is no JavaScript support */
.cbb {
	background: #FFF;
	line-height: 170%;
	height: 100%;
	width: 100%;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */
.cb {
	margin: 0.5em 0;
	line-height: 170%;
}

/* Rules for the top corners and border */
.bt {
	background: url(../image/box.png) no-repeat 100% 0 !important;
	background: url(../image/box.gif) no-repeat 100% 0;
	margin: 0 0 0 18px;
	height: 27px;
}

.bt div {
	height: 27px;
	width: 18px;
	position: relative;
	left: -18px;
	background: url(../image/box.png) no-repeat 0 0 !important;
	background: url(../image/box.gif) no-repeat 0 0;
}

/* Rules for the bottom corners and border */
.bb {
	background: url(../image/box.png) no-repeat 100% 100% !important;
	background: url(../image/box.gif) no-repeat 100% 100%;
	margin: 0 0 0 12px;
	height: 14px;
}

.bb div {
	height: 14px;
	width: 12px;
	position: relative;
	left: -12px;
	background: url(../image/box.png) no-repeat 0 100% !important;
	background: url(../image/box.gif) no-repeat 0 100%;
}

/* Insert the left border */
.i1 {
	padding: 0 0 0 12px;
	background: url(../image/borders.png) repeat-y 0 0 !important;
	background: url(../image/borders.gif) repeat-y 0 0;
}
/* Insert the right border */
.i2 {
	padding: 0 12px 0 0;
	background: url(../image/borders.png) repeat-y 100% 0 !important;
	background: url(../image/borders.gif) repeat-y 100% 0;
}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background: #FFF;
	border: 1px solid #FFF;
	border-width: 1px 0;
	padding: 0 5px;
}


/* CSS for the box ends here */

address {
	margin-left: 50px;
}

/* erm, the footer */
#footer {
	width: 1024px;
	height: 85px;
	background: transparent url(../image/footer.gif);
	clear: both;
}

#footer p {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 0;
	padding-top: 50px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 0;
	font-size: small;
	clip: rect(auto, auto, auto, auto);
	text-align: center;
}

#footer a:link,#footer a:visited {
	color: #D7D493;
}

#footer a:hover {
	color: #000;
	background: #D7D493;
}

img {
	
}

.pic img{
	float: right;
}

/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */
.thumbnails {
	margin: 0 0 20px 50px;
}

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */
.spacer {
	clear: both;
}

/* CSS for the ticked off links. Note, I am not ordering things in the LVHA way, as I prefer the visited tick to work above the arrow once visited. */
.cbSide ul {
	list-style-type: none;
	margin-top: 0px;
	margin-left: 0;
	margin-bottom: 0;
	padding: 3px;
}

.cbSide li a:link {
	color: #333;
	line-height: 150%;
	text-decoration: none;
	display: block;
	width: 154px;
	border-bottom: 1px solid #EDEAEB;
	background: #FFF url(../image/ticks.gif);
}

.cbSide li a:visited {
	color: #333;
	line-height: 150%;
	text-decoration: none;
	display: block;
	width: 154px;
	border-bottom: 1px solid #EDEAEB;
	background: #FFF url(../image/ticks.gif);
}

.cbSide li a:hover {
	color: #990000;
	line-height: 150%;
	display: block;
	width: 154px;
	border-bottom: 1px solid #EDEAEB;
	background: #FFF url(../image/ticks.gif) 0px -20px;
	text-decoration: none;
}

.cbSide li a:active {
	color: #333;
	line-height: 150%;
	text-decoration: none;
	display: block;
	width: 154px;
	border-bottom: 1px solid #EDEAEB;
	background: #FFF url(../image/ticks.gif);
}

body.hospitalinfo .cbSide a#hospitalinfo{ 
  color: #fff;
	text-decoration: underline;
}

body.hospitalinfo .cbSide a:hover#hospitalinfo{ 
  color: #000;
}

/* horizontal main menu navigation */
#mainNav {
	padding: 0;
	width: 1024px;
	height: 35px;
	font-weight: bold;
	font-size: 100%;
	margin-bottom: 0;
	margin-left: 10px;
	margin-top: 50px;
}

#mainNav ul {
	list-style: none;
	padding: 0;
	border: none;
	margin-top: 0;
	margin-right: 30px;
	margin-bottom: 0;
	float: right;
}

#mainNav li {
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	background-color: #FFF;
}

#mainNav a {
	color: #D7D493;
	display: inline;
	text-decoration: none;
	margin: 0;
	padding: 10px;
	border-right: 1px solid #FFF;
	background-color: #4B8E25;
}

#mainNav .userOpt a {
	color: #FFFFFF;
	display: inline;
	text-decoration: none;
	margin: 100;
	padding: 10px;
	border-right: 1px solid #FFF;
	background-color: #4B8E25;
}

#mainNav a:hover,#mainNav a:active {
	color: #000;
	background-color: #D7D493;
}

#mainNav a.active:link,#mainNav a.active:visited {
	position: relative;
	z-index: 102;
	background: #BBB;
	color: #D7D493;
	font-weight: bold;
}

/* Highlighting the current page */
body.home #mainNav a#home, body.gallery #mainNav a#gallery, body.contact #mainNav a#contact{ 
  color: #fff;
	text-decoration: underline;
}

body.home #mainNav a:hover#home, body.gallery #mainNav a:hover#gallery, body.contact #mainNav a:hover#contact { 
  color: #000;
}

/* Highlighting external links ONLY in the main text areas, so as not to screw up the ticked-off links */
.box.default a[href ^="http:"] {
	background: url(../image/external.gif) no-repeat right top;
	padding-right: 10px;
}

.box.default a[href ^="http://www.collylogic.com"],.box.default a[href ^="http://www.collylogic.com"]
	{
	background-image: none;
	padding-right: 0;
}
